<template>
	<view class="broadSide" :style="{ zIndex: leftSideIndex }">
		<view @click="showLeftSide = false" class="mask" :class="{ showMask: showLeftSide }"></view>
		<view class="leftSide" :class="{ showLeftSide }">
			<view :style="{backgroundImage: 'url('+innerUserDetail.profile.backgroundUrl+')'}" class="topArea"></view>
			<view class="bottomArea">
				<view class="container">
					<view class="userLine jc-between ai-center">
						<view class="jc-between ai-center">
							<view :style="{backgroundImage: 'url('+innerUserDetail.profile.avatarUrl+')'}" class="avatar"></view>
							<text>{{innerUserDetail.profile.nickname}}</text>
						</view>
						<view @click="handleSign" :class="{haveSigned: innerUserDetail.mobileSign}">
							{{innerUserDetail.mobileSign?'已签到':'签到'}}
						</view>
					</view>
					<view class="userMenu ic-start ai-center">
						<view @click="handleUsermenu(item)" v-for="(item,index) in userMenu" :key="index" class="userMenuItem jc-center ai-center">
							<view></view>
							<view>{{item.title}}</view>
						</view>
					</view>
					<view class="menuList1">
						<u-cell-item icon="hourglass-half-fill" title="定时停止播放" :arrow="false"></u-cell-item>
					</view>
				</view>
				<view class="bottomMenu jc-between ai-center">
					<view @click="toggleTheme">
						<view class="themeIcon" :style="{backgroundImage: 'url(/static/main/'+(themeIcon=='son'?'son':'moon')+'.png)'}"></view>
						{{themeIcon=='son'?'日间模式':'夜间模式'}}
					</view>
					<view @click="toSetting">
						<view class="themeIcon"></view>
						设置
					</view>
					<view>
						<view class="themeIcon"></view>
						退出
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		handleDefaultSign
	} from '../../api/account.js'
	export default {
		props: {
			userDetail: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				showLeftSide: false,
				leftSideIndex: -999,
				themeIcon: "moon",
				innerUserDetail: {
					profile: {}
				},
				userMenu: [{
						title: "我的好友",
						path: ""
					},
					{
						title: "个人主页",
						path: "/pages/main/userInfo"
					}
				]
			};
		},
		watch: {
			showLeftSide(newV, oldV) {
				newV
					?
					(this.leftSideIndex = 999) :
					setTimeout(() => {
						this.leftSideIndex = -999;
					}, 400);
			},
			userDetail: {
				handler(newV) {
					this.innerUserDetail = newV
				},
				deep: true
			}
		},
		created() {

		},
		methods: {
			handleUsermenu(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					})
				}
			},
			handleSign() {
				if (this.innerUserDetail.mobileSign === false) {
					handleDefaultSign().then(res => {
						if (res.code == 200) {
							this.innerUserDetail.mobileSign = true
							uni.showToast({
								title: `签到成功，获得${res.point}积分`,
								icon: 'none'
							})
						}
					})
				}
			},
			toSetting() {
				uni.navigateTo({
					url: "/pages/main/setting"
				})
			},
			showModal() {
				uni.showModal({
					title: 'modal',
					content: 'modalContent',
					showCancel: true
				})
				setTimeout(() => {
					location.reload()
				}, 2000)
			},
			toggleTheme() {
				window.document.documentElement.setAttribute('data-theme', this.themeIcon);
				if (this.themeIcon == 'son') {
					this.themeIcon = 'moon'
				} else {
					this.themeIcon = 'son'
				}
				uni.setStorageSync('themeIcon', this.themeIcon)
			},
			show() {
				this.showLeftSide = true;
			},
			hide() {
				this.showLeftSide = false;
			}
		}
	};
</script>

<style lang="scss">
	.broadSide {
		height: 100vh;
		width: 750upx;
		position: absolute;
		top: 0;

		.mask {
			z-index: 999;
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
			background-color: rgba($color: #000, $alpha: 0.5);
			opacity: 0;
			transition: all 0.4s ease;
		}

		.showMask {
			opacity: 1;
			transition: all 0.4s ease;
		}

		.showLeftSide {
			transform: translateX(0) !important;
			transition: all 0.4s ease;
		}

		.leftSide {
			font-size: 12px;
			z-index: 1000;
			width: 626upx;
			height: 100%;
			background: linear-gradient(-5deg, #585858, #b4b4b4);
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 0;
			transform: translateX(-100%);
			transition: all 0.4s ease;

			.topArea {
				width: 100%;
				height: 26vh;
				position: absolute;
				top: 0;
				@include bgRepeate_none();
			}

			.bottomArea {
				margin-top: 24vh;
				z-index: 1000;
				flex: 1;
				background-color: white;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;

				.container {
					height: 100%;
					overflow-y: scroll;
					padding: 16px 16px 40px;

					.userLine {
						font-size: 14px;

						>view:first-of-type {
							.avatar {
								@include roundness(32);
								@include bgRepeate('/static/mine/avatar.jpg');
								margin-right: 6px;
							}
						}

						>view:last-of-type {
							font-size: 12px;
							background-color: $primary;
							color: #fff;
							padding: 3px 10px;
							border: 1px solid rgba($color: #ccc, $alpha: 0.6);
							border-radius: 12px;
						}

						.haveSigned {
							background-color: transparent !important;
							color: #000 !important;
						}
					}

					.userMenu {
						padding: 14px 0;
						border-bottom: 1px solid #f4f4f4;

						.userMenuItem {
							width: 16vw;
							font-size: 12px;
							flex-direction: column;

							>view:first-child {
								width: 6vw;
								height: 6vw;
								margin-bottom: 6px;
							}
						}

						.userMenuItem:first-of-type {

							>view:first-child {
								@include bgRepeate('/static/mine/friends.png');
							}
						}

						.userMenuItem:nth-of-type(2) {
							>view:first-child {
								@include bgRepeate('/static/mine/home.png');
							}
						}
					}
				}

				.bottomMenu {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 40px;
					border-top: 1px solid rgba($color: #ccc, $alpha: 0.2);

					>view {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						>view {
							margin-right: 6px;
							width: 22px;
							height: 22px;
						}
					}

					>view:first-of-type {
						>view {
							@include bgRepeate('/static/main/moon.png');
							background-size: 96%;
						}
					}

					>view:nth-of-type(2) {
						>view {
							@include bgRepeate('/static/main/setting.png');
							background-size: 82%;
						}
					}

					>view:last-of-type {
						>view {
							@include bgRepeate('/static/main/exist.png')
						}
					}
				}
			}
		}
	}
</style>
